<template>
  <div class="ent">
    <div class="box">
      <van-cell-group inset>
        <!-- 委托 -->
        <van-cell is-link to="/myentrust">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 795.png" alt="" />
            </van-tag>
            <span class="custom-title">我的委托</span>
          </template>
        </van-cell>
        <!-- 问答 -->
        <van-cell is-link to="/myanswer">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 800.png" alt="" class="img2" />
            </van-tag>
            <span class="custom-title">我的问答</span>
          </template>
        </van-cell>
        <!-- 律师 -->
        <van-cell is-link to="/mylawyer">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 797.png" alt="" class="img3" />
            </van-tag>
            <span class="custom-title">我的律师</span>
          </template>
        </van-cell>
        <!-- 收藏 -->
        <van-cell is-link to="/mycollect">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 798.png" alt="" class="img4" />
            </van-tag>
            <span class="custom-title">我的收藏</span>
          </template>
        </van-cell>

        <!-- 设置 -->
        <van-cell is-link to="/set">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 799.png" alt="" class="img5" />
            </van-tag>
            <span class="custom-title">设置</span>
          </template>
        </van-cell>
        <!-- 联系客服 -->
        <van-cell is-link @click="show = true">
          <template #title>
            <van-tag>
              <img src="@/assets/My_img/形状 796.png" alt="" class="img6" />
            </van-tag>
            <span class="custom-title">联系客服</span>
          </template>

          <!-- 遮罩 -->
          <van-overlay :show="show" @click="show = false" @click.stop>
            <div class="wrapper">
              <div class="block">
                <div class="top">
                  <p class="lianxi">联系客服</p>
                  <p class="saoma">微信扫描二维码，联系客服</p>
                </div>
                <!-- 二维码 -->
                <div class="imgt">
                  <img src="@/assets/My_img/erweima.png" alt="" />
                </div>
                <div class="baoc">
                  <p>保存二维码</p>
                </div>
                <!-- 客服电话 -->
                <div class="bottom">
                  <p class="call">
                    <van-divider>客服电话</van-divider>
                  </p>
                  <div class="flx">
                    <p>45202630556</p>
                    <p>点击拨打</p>
                  </div>
                </div>
              </div>
            </div>
          </van-overlay>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.ent {
  border-radius: 1.4rem;
  .box {
    width: 6.86rem;
    background: #ffffff;
    border-radius: 0.3rem;
    border-radius: 0.14rem;
    line-height: 0.2rem;
    font-family: PingFang SC;
    margin: 0.32rem 0.3rem 0 0.32rem;
    background-color: rgba(255, 255, 255, 100);
    text-align: center;
    .van-cell__title {
      .van-tag--default {
        background: rgb(255, 255, 255);
      }
      text-align: left;
      .custom-title {
        margin-left: 0.3rem;
        font-size: 0.3rem;
      }
    }
    .van-cell-group--inset {
      margin: 0 0;
    }

    .van-tag {
      float: left;
      padding: 0 0;

      width: 0.4rem;
      img {
        width: 0.5rem;
        height: 0.42rem;
      }
      .img2 {
        width: 0.5rem;
        height: 0.46rem;
      }
      .img3 {
        width: 0.49rem;
        height: 0.39rem;
      }
      .img4 {
        width: 0.4rem;
        height: 0.39rem;
      }
      .img5 {
        width: 0.42rem;
        height: 0.42rem;
      }
      .img6 {
        width: 0.42rem;
        height: 0.39rem;
      }
    }
    .custom-title {
      float: left;
      display: block;
      margin-top: 0.03rem;
      margin-left: 0.3rem;
    }

    //  遮罩样式
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      width: 240px;
      height: 300px;
      text-align: center;
      border-radius: 37px;
      background-color: #fff;
      .top {
        margin-top: 12px;
        .lianxi {
          font-size: 18px;
          font-weight: 600;
          color: #6c6c6c 100%;
        }
        .saoma {
          margin-top: 5px;
          font-size: 13px;
        }
      }
      .imgt {
        width: 138px;
        height: 138px;
        margin: 10px auto;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .baoc {
        width: 86px;
        height: 18px;
        line-height: 18px;
        margin: 0 auto;
        text-align: center;
        border-radius: 11px;
        font-size: 12px;
        border: 1px solid rgba(154, 154, 154, 100);
      }
      .bottom {
        font-size: 13px;
        width: 231px;
        margin: 0 auto;
        .van-divider {
          margin: 0 0;
          font-size: 12px;
        }
        .call {
          font-size: 12px;
        }
        .flx {
          display: flex;
          font-size: 12px;
          box-sizing: border-box;
          padding: 0 0.1rem 0 0.1rem;
          justify-content: space-between;
          border-radius: 5px;
          width: 190px;
          height: 22px;
          margin: 0 auto;
          background-color: rgba(239, 239, 239, 100);
        }
      }
    }
  }
}
</style>
